<template>
  <!-- 登录 -->
    <el-dialog
    title="提示"
    v-model="dialogVisible"
    width="50%"
    :before-close="handleClose">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <div class="bord">
                <h1 class="h">登录</h1>
                <b>
                <el-form-item label="用户名" prop="userName">
                    <el-input v-model="ruleForm.userName"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="pass">
                    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')" @mousedown="getId">确定</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                    <router-link to="Zhuce" class="xian"><el-button>注册</el-button></router-link>
                </el-form-item>
                
              </b>
            </div>
        </el-form>
      <!-- eslint-disable-next-line -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    

      <el-table :data="tableData"
            border
            style="width: 100%">
                <el-table-column fixed prop="id" label="id" width="auto">
                </el-table-column>
                <el-table-column prop="name" label="名字" width="auto">
                </el-table-column>
                <el-table-column prop="age" label="年龄" width="auto">
                </el-table-column>
                <el-table-column prop="sex" label="性别" width="auto">
                </el-table-column>
                <el-table-column fixed="right" label="操作">
                    <template #default="scope">
                        <el-button @click="deluser(scope.row.id)" type="text" size="small">注销</el-button>
                        <el-button @click="dialog = true"  @mousedown="updUser(scope.row.name,scope.row.age,scope.row.sex,scope.row.userName,scope.row.password)" type="text" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>

    <el-drawer
            title="修改"
            :before-close="handleClose"
            v-model="dialog"
            direction="ltr"
            custom-class="demo-drawer"
            ref="drawer"
            >
      <!-- 修改的侧边框 -->
      <div class="demo-drawer__content">
          <el-form :model="form">
          <el-form-item label="姓名" :label-width="formLabelWidth">
              <el-input v-model="form.name" type="text" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="年龄" :label-width="formLabelWidth">
              <el-input v-model="form.age" type="text" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth">
              <el-input v-model="form.sex" type="text" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="用户名" :label-width="formLabelWidth">
              <el-input v-model="form.userName" type="text" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth">
              <el-input v-model="form.password" type="text" autocomplete="off"></el-input>
          </el-form-item>
          </el-form>
          <div class="demo-drawer__footer">
          <el-button @click="dialog = false">取 消</el-button>
          <el-button type="primary" @click="updataUser(form)" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
          </div>
      </div>
    </el-drawer>
</template>

<script>
import emitter from '../utils/event-bus'
import axios from 'axios'
  export default {
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      
      return {
        dialogVisible: true,
        // user数据All
        realuser : [],
        // user当前数据的ID
        realId:'',
        // 用户输入的用户名和密码
        ruleForm: {
            userName: '',
            pass: '',
        },
        form : {
          name : '',
          age : '',
          sex : '',
          userName : '',
          password : ''
        },
        // 侧边页面的展示
        dialog : false,
        rules: {
            userName: [
                { required: true, message: '请输入用户名', trigger: 'blur' },
                { min: 3, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
            pass: [
                { validator: validatePass, trigger: 'blur' }
            ],
        },
        // user当前的对象
        tableData:[],
        realUser:[],
      };
    },
    mounted(){
      emitter.on('delUser',this.delId)
      emitter.on('delUser',this.delUser)
      emitter.on('judgment',this.logged)
    },
    methods: {
      submitForm(formName) {
          this.$refs[formName].validate((valid) => {
          if (valid) {
            axios.get('/userAll').then(
              response =>{
                this.realuser = response.data
                for(let i=0;i<this.realuser.length;i++){
                    if(this.realuser[i].userName == this.ruleForm.userName && this.realuser[i].password == this.ruleForm.pass){
                      this.$notify({
                              title: '登录成功',
                              message: '操作成功',
                              type: 'success'
                      });
                      this.realId = this.realuser[i].id
                      console.log(this.realId)
                      this.dialogVisible = false
                      break
                    }else {
                      if(i==this.realuser.length - 1){
                        this.$notify.error({
                                title: '登录失败',
                                message: '用户名或密码错误',
                                type: 'success'
                        });
                      }
                    }
                        
                }
                // 获取当前id的对象
                if(this.realId != ''){
                  axios.get('/User/' + this.realId).then(
                    response => {
                        this.realUser = response.data
                        this.tableData = this.realUser
                        axios.get('/getCurrentId/id?id=' + this.realId).then(
                          response => {
                            console.log(response.data)
                          },
                          error => {
                            console.log(error.message)
                          }
                        )
                        emitter.emit('submitForm',this.realId)
                    },
                    error => {
                      console.log(error.message)
                    }
                  )
                }
              },
              error =>{
                console.log(error.message)
              }
            )

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      // 删除当前id
      delId(id){
        this.realId = id
      },
      // 是否登录
      logged(zhanshi){
        if(zhanshi == false){
          //已经登录
          this.dialogVisible = false
          this.tableData = this.realUser
          console.log(this.tableData)
          this.success = true
        }else if(zhanshi == true){
          //没有登录
          this.dialogVisible = true
        }
            
      },
      // 退出时清空tableData
      delUser(){
        this.realUser = ''
        this.tableData = ''
      },
      // 删除当前数据
      deluser(id){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
          }).then(() => {
              axios.post('/delUser', {id : id }).then(
                  response => {
                      console.log("响应：" + response.data)
                  },
                  error => {
                      console.log("错误：" + error.message)
                  })
              this.$message({
                  type: 'success',
                  message: '删除成功!',
              })
              this.tableData = ''
              }).catch(() => {
                  this.$message({
                  type: 'info',
                  message: '已取消删除'
              });          
          });
      },
      //为改数据获取当前id
      updUser(name,age,sex,userName,password){
          this.form.userName = userName
          this.form.password = password
          this.form.name = name
          this.form.age = age 
          this.form.sex = sex
      },
      // 改数据
      updataUser(from){
                this.loading = false;
                this.dialog = false;

                if( from.name == ''  || from.age == '' || from.sex == '' || from.userName == '' || from.password == ''){
                    this.$notify.error({
                        title: '错误',
                        message: '操作失败'
                    });
                }else{
                    axios.post('/updUser', {id : this.realId , name : from.name, age : from.age, sex: from.sex, userName : from.userName, password : from.password }).then(
                    response => {
                        console.log(response.data)
                    },
                    error => {
                        console.log(error.message)
                    })
                    this.$notify({
                    title: '成功',
                    message: '操作成功',
                    type: 'success'
                    }); 
                }
                from.name = '',
                from.age = '',
                from.sex = ''
                from.userName = '',
                from.password = ''
            },
    }
  }

</script>

<style scoped>
  .demo-ruleForm{
      margin:auto;
      width:500px;
      height:500px;
      float:top;
  }
  .bord{
      margin:auto;
      position: relative;
      bottom:-50px;
      left:-30px;
      width:400px;
      float:top;
  }
  .h{
     font-family:Kaiti;
     font-size:30px;
     text-align: center;
     position: relative;
     right:-20px;
     float:top;
  }
  .back{
      width:5px;
      height:5px;
  }
  .xian{
    text-decoration:none;
    position: relative;
    right:-14px;
    top:-1px;
  }
</style>